<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Continuous slider (e.g. color component sliders)</h2>
      <p>Move the red, green, and blue sliders to choose a color.</p>
      <div class="demo-color-container">
        <div class="demo-color-sliders">
          <div>
            <label class="demo-color-label" for="r-slider">Red</label>
            <mat-slider aria-label="Red" id="r-slider" min="0" max="255" discrete>
              <input matSliderThumb [(ngModel)]="red" />
            </mat-slider>
          </div>
          <div>
            <label class="demo-color-label" for="g-slider">Green</label>
            <mat-slider aria-label="Green" id="g-slider" min="0" max="255" discrete>
              <input matSliderThumb [(ngModel)]="green" />
            </mat-slider>
          </div>
          <div>
            <label class="demo-color-label" for="b-slider">Blue</label>
            <mat-slider aria-label="Blue" id="b-slider" min="0" max="255" discrete>
              <input matSliderThumb [(ngModel)]="blue" />
            </mat-slider>
          </div>
        </div>
        <div class="demo-color-swatch" [style.background]="swatchBackground"></div>
      </div>
    </section>

    <section>
      <h2>Discrete slider (e.g. rate a product)</h2>
      <p>Please rate our product on a scale of 1 (not satisfied) to 5 (extremely satisfied).</p>
      <mat-slider min="1" max="5" step="1" showTickMarks aria-label="Rating" discrete>
        <input matSliderThumb />
      </mat-slider>
    </section>

    <section>
      <h2>Slider with custom thumb label formatting.</h2>
      <mat-slider
        min="0"
        max="100000"
        step="1000"
        showTickMarks
        discrete
        [displayWith]="formatLabel"
      >
        <input matSliderThumb />
      </mat-slider>
    </section>

    <section>
      <h2>Range slider</h2>
      <div class="demo-volume-container">
        <mat-slider min="200" max="500">
          <input value="300" matSliderStartThumb />
          <input value="400" matSliderEndThumb />
        </mat-slider>
      </div>
    </section>
  </mat-card-content>
</mat-card>
